<template>
    <div id="topsearch">
     <el-row>
      <el-col :span="12">
          <el-form
          ref="elForm"
          :model="formData"
          :rules="rules"
          size="small"
          label-width="100px"
          >
            <el-row>
               <slot></slot>
              <el-col :span="6">
                <el-row>
                  <el-form-item label-width="0" prop="field108">
                    <el-input
                      v-model="formData.field108"
                      placeholder="请输入关键字"
                      clearable
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-row>
              </el-col>

              <el-col :span="4">
                <el-row></el-row>
              </el-col>
              <el-col :span="4">
                <el-row></el-row>
              </el-col>
              <el-col :span="4">
                <el-row></el-row>
              </el-col>
              <el-col :span="4">
                <el-row></el-row>
              </el-col>
            </el-row>
          </el-form>
            </el-col>
            <el-col :span="12">
      <div class="rightbtn fr">
        <el-button type="primary" icon="el-icon-search" size="small" @click="searchlist">查询</el-button>
        <el-button icon="el-icon-refresh-left" size="small" @click="resetform">重置</el-button>
      </div>
    </el-col>
    </el-row>
    </div>
</template>

<script>
export default {
    data(){
        return {
      formData: {
        field108: undefined,
      },
      rules: {
        field108: [],
      },
    }
    },
    methods:{
        //查询按钮事件
        searchlist(){
            this.$emit('searchkey',this.formData)

        },
        //重置按钮
        resetform(){
             this.$message.success('查询已重置')
             //清空表单
             this.$refs['elForm'].resetFields()
        }
    }
}
</script>

<style scoped lang='scss'>
::v-deep{
  .addrule{
    padding-left: 10px;
    padding-right: 10px;
  }
}
</style>
